<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-association">
  <span class="ddp-label">{{ 'msg.board.create.association-key' | translate }}</span>
  <!-- box data -->
  <div class="ddp-box-data">
    <div class="ddp-bar"></div>
    <div class="ddp-box-name ddp-fleft">
      {{relation.ui.source.name}}
      <span *ngIf="relation.ui.sourceField"> | <strong>{{relation.ui.sourceField.name}}</strong> </span>
    </div>
    <div class="ddp-box-name ddp-fright">
      {{relation.ui.target.name}}
      <span *ngIf="relation.ui.targetField"> | <strong>{{relation.ui.targetField.name}}</strong> </span>
    </div>

  </div>
  <!-- //box data -->
  <!-- buttons -->
  <div class="ddp-buttons">
    <a (click)="editRelation()" href="javascript:" class="ddp-btn-delete-b"></a>
    <a (click)="deleteRelation()" href="javascript:" class="ddp-btn-edit-b"></a>
  </div>
  <!-- //buttons -->
</div>
